<template>
  <div id="songs">
    <div class="container">
      <ul class="tags">
        <li
          v-for="(item,index) in Songs"
          :key="index"
          :class="tagIndex===index?'active':''"
          @click="tagIndex=index"
        >
          <a :href="item.href">{{item.tag}}</a>
        </li>
      </ul>
    </div>
    <div class="back-wrapper">
      <div class="container">
        <div class="wrapper-contain">
          <div class="wrapper-left">
            <div class="ImgBox">
              <template v-for="index in Songs[tagIndex].data.length<6?Songs[tagIndex].data.length:6" :key="index">
                <ImgLazy :url="require('@/assets/images/home/'+Songs[tagIndex].data[index-1].imgsrc)" />
              </template>
            </div>
            <div class="play_all_songs">全部播放</div>
          </div>
          <div class="wrapper-items">
            <div class="item-column" v-for="(item,index) in Songs[tagIndex].data" :key="index">
              <Item :data="item"  :isduration="true"></Item>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Item from "../ItemColumnItem"
import Songs from '@/data/home/songs.js'
import {reactive,toRefs} from 'vue'
export default {
    name:"Songs",
    components: {Item},
    setup(){
        const state = reactive({
            tagIndex:0,
        })
        
        return{
            ...toRefs(state),
            Songs
        }
    },
}
</script>

<style lang="scss" scoped>
#songs {
  $containL: 385px;
  min-height: 470px;
  .tags {
    padding-left: $containL;
    padding-top: 4px;
    height: 55px;
    line-height: 55px;

    li {
      float: left;
      margin-right: 26px;

      a {
        color: inherit;
      }
    }
    .active {
      color: $ThemeColor;
    }
  }
  .wrapper-contain {
    position: relative;
    padding-left: $containL;

    .wrapper-left {
      width: 335px;
      height: 495px;
      padding: 8px;
      position: absolute;
      left: 0;
      top: -58px;
      box-sizing: border-box;
      background-color: #333;

      &::before {
        content: "";
        width: 100%;
        height: 100%;
        background-size: 100% 100%;
        background: url("../../../assets/images/home/song_layer.png") no-repeat;
        position: absolute;
        top: 0;
        left: 0;
      }

      &::after {
        content: "";
        display: block;
        height: 0;
        visibility: hidden;
        clear: both;
      }

      .ImgBox {
        img {
          width: 50%;
          float: left;
        }
      }

      .play_all_songs {
        text-align: center;
        width: 120px;
        height: 40px;
        line-height: 40px;
        color: #fff;
        border-radius: 20px;
        border: 2px solid #fff;
        position: absolute;
        right: 8%;
        bottom: 20px;
        cursor: pointer;
      }
    }

    .wrapper-items {
      padding: 23px 0 8px;
      margin: 0 -22px;

      &::after {
        content: "";
        display: block;
        height: 0;
        visibility: hidden;
        clear: both;
      }

      .item-column {
        width: 50%;
        height: 80px;
        padding: 0 22px;
        float: left;
        box-sizing: border-box;
        margin-bottom: 15px;
      }
    }
  }
}
</style>